@import "style/theme.less";

.detail-page {
  .header-info {
    background-color: @headerBgColor;
    padding: 12px 16px;
    color: #fff;
    position: sticky;
    top: 0px;
    z-index: 1;

    .opp-name {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 16px;
    }

    .creator-section {
      display: flex;
      justify-content: space-between;
      margin-bottom: 14px;
    }
     .creator-info-wrap {
       margin-bottom: 14px;
     }
    .creator-info {
      display: inline-block;
      max-width: 60%;
      word-break: break-all;
    }

    .creator-item-label {
      &::after {
        content: ":";
        display: inline-block;
        margin: 0px 6px 0px 2px;
      }
    }

    .staff-item {
      display: inline-block;
      border-radius: 4px;
      border: 1px solid #fff;
      padding: 1px 6px;
      font-size: 12px;
      line-height: 12px;
    }

    .opp-name-wrap {
      word-break: break-all;

      &.has-edit {
        padding-right: 26px;
        position: relative;
      }

      .edit-icon {
        position: absolute;
        right: 4px;
        top: 4px;
        font-size: 16px;
        cursor: pointer;
      }
    }

    .opp-customer {
      max-width: 60%;

      :global {
        .wechat-name {
          color: #fff;
        }
      }
    }

    .stage-item-wrap {
      max-width: 40%;
    }

    .create-time {}

    .create-time-text {
      margin-right: 6px;
    }

    .action-section {
      display: flex;
      justify-content: center;
      padding: 20px 0px 30px 0px;

      .action-item {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: 1px solid #fff;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .action-icon {
        width: 20px;
        height: 20px;
      }
    }
  }

  .tabs-header {
    // background-color: #fff;
    background-color: @body-color;
    padding: @body-spacing @body-spacing 0px @body-spacing;
    :global {
      .adm-tabs-tab-list {
        background-color: #fff;
      }
    }
  }
  .fixed-section {
    position: sticky;
    top: 0px;
    z-index: 1;
  }

  .detail-body {
    padding: 0px @body-spacing 14px @body-spacing;
    // .tabs-header {

    // }
    .body-content {
      background-color: #fff;
      :global {
        .adm-tabs-header {
          display: none;
        }
      }
    }
  }
}

.stage-item {
  display: inline-block;
  word-break: break-all;
  border-radius: 8px;
  border: 1px solid #fff;
  padding: 2px 12px 2px 12px;
  font-size: 12px;
  line-height: 12px;
  position: relative;
  &.has-arrow {
    padding-right: 28px;
  }
  .stage-arrow {
    position: absolute;
    right: 8px;
    top: 2px;
  }
}